<template>
	<view class="apps">
		<uv-navbar placeholder>
			<template v-slot:left>
				<view class="flex aic">
					<view class="flex jcc plr10 bdr100 bd1s bdb1 bdl1 bdr1 bdt1 aic" >
						<uv-icon name="home" size="19" @click="handleIndex()"></uv-icon>
						<uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line>	
						<uv-icon name="search" size="20" @click="handle('/pages/forum/search')"></uv-icon>
					</view>
					<view class="f14 fw400 ml20" @click="handleIndex()">发现</view>
					<view class="f16 fw600 ml20">广场</view>
				</view>
			</template>
		</uv-navbar>
		<view class="mt10 plr20 ptb10 bgwhite">
			<uv-avatar-group :urls="avatarImages" size="32" gap="0.1"></uv-avatar-group>
		</view>
		<view class="mlr20 mt20 ptb10 bgwhite bdr20 flex fdc">
			<uv-sticky bgColor="#fff">
				<uv-tabs :list="types" lineWidth="30" 
				lineColor="#f5c185" 
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					fontSize:'26rpx',
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)',
					fontSize:'26rpx',
				}" 
				itemStyle="padding-left: 15rpx; padding-right: 15rpx; height: 60rpx;font-size:26rpx;">
					<template v-slot:right>
						<view style="padding-left: 4px;" @tap="toast">
							<uv-icon name="list" size="21" bold></uv-icon>
						</view>
					</template>
				</uv-tabs>
			</uv-sticky>
		</view>
		
		<view class="mt20 flex fdc mlr20">
			<view class="bgwhite flex fdc ptb20 plr20 mb20 bdr20">
				<view class="flex aic mb10">
					<view class="flex f1 aic">
						<uv-avatar src="https://athemc.byyds.cn/static/images/ya.png" size="30"></uv-avatar>
						<view class="f26r flex ml10">SINAIC</view>
					</view>
					<view class="flex">
						
						<view class="mr20">
							<uv-icon name="chat" size="20"></uv-icon>
						</view>
						<view class="mr20">
							<uv-icon name="heart" size="20"></uv-icon>
						</view>
						<view class="mr20">
							<uv-icon name="thumb-up" size="20"></uv-icon>
						</view>
					</view>
				</view>
				<view class="flex">
					<view style="width: 150rpx; height:180rpx;overflow: hidden;">
						<image src="https://athemc.byyds.cn/static/images/active.jpg" mode="widthFix" style="width: 150rpx; height:180rpx;"></image>
					</view>
					<view class="f1 flex fdc ml20">
						<view class="f26r fw600 th2d">宝藏乐队Kannenron</view>
						<view class="mt10 f24r fw400 c666 t3hd">
							一个宝藏乐队Kannenron，来自广州大学城，姐妹们简直是诀绝子！哈哈哈这个乐队成员每个都是帅哥美女!!!来自广州大学城，姐妹们简直是诀绝子！哈哈哈
						</view>
						<view class="mt10 f24r c666 flex aic"> <uv-icon name="clock" size="16" color="#f5c185"></uv-icon> 3分钟前</view>
					</view>
					<view class="ml10 flex aic jcc">
						<uv-icon name="arrow-right" size="16" color="#666"></uv-icon>
					</view>
				</view>
			</view>
			<view class="bgwhite flex fdc ptb20 plr20 mb20 bdr20">
				<view class="flex aic mb10">
					<view class="flex f1 aic">
						<uv-avatar src="https://athemc.byyds.cn/static/images/ya.png" size="30"></uv-avatar>
						<view class="f26r ml10">SINAIC</view>
					</view>
					<view class="flex">
						<view class="mr20">
							<uv-icon name="chat" size="20"></uv-icon>
						</view>
						<view class="mr20">
							<uv-icon name="heart" size="20"></uv-icon>
						</view>
						<view class="mr20">
							<uv-icon name="thumb-up" size="20"></uv-icon>
						</view>
					</view>
				</view>
				<view class="flex">
					<view style="width: 150rpx; height:180rpx;overflow: hidden;">
						<image src="https://athemc.byyds.cn/static/images/active.jpg" mode="widthFix" style="width: 150rpx; height:180rpx;"></image>
					</view>
					<view class="f1 flex fdc ml20">
						<view class="f26r fw600 th2d">宝藏乐队Kannenron</view>
						<view class="mt10 f24r fw400 c666 t3hd">
							一个宝藏乐队Kannenron，来自广州大学城，姐妹们简直是诀绝子！哈哈哈这个乐队成员每个都是帅哥美女!!!来自广州大学城，姐妹们简直是诀绝子！哈哈哈
						</view>
						<view class="mt10 f24r c666 flex aic"> <uv-icon name="clock" size="16"></uv-icon> 3分钟前</view>
					</view>
					<view class="ml10 flex aic jcc">
						<uv-icon name="arrow-right" size="16" color="#666"></uv-icon>
					</view>
				</view>
			</view>
			<view class="bgwhite flex fdc ptb20 plr20 mb20 bdr20">
				<view class="flex aic mb10">
					<view class="flex f1 aic">
						<uv-avatar src="https://athemc.byyds.cn/static/images/ya.png" size="30"></uv-avatar>
						<view class="f26r ml10">SINAIC</view>
					</view>
					<view class="flex">
						<view class="mr20">
							<uv-icon name="share" size="20"></uv-icon>
						</view>
						<view class="mr20">
							<uv-icon name="chat" size="20"></uv-icon>
						</view>
						<view class="mr20">
							<uv-icon name="thumb-up" size="20"></uv-icon>
						</view>
					</view>
				</view>
				<view class="flex">
					<view style="width: 150rpx; height:180rpx;overflow: hidden;">
						<image src="https://athemc.byyds.cn/static/images/active.jpg" mode="widthFix" style="width: 150rpx; height:180rpx;"></image>
					</view>
					<view class="f1 flex fdc ml20">
						<view class="f26r fw600 th2d">宝藏乐队Kannenron</view>
						<view class="mt10 f24r fw400 c666 t3hd">
							一个宝藏乐队Kannenron，来自广州大学城，姐妹们简直是诀绝子！哈哈哈这个乐队成员每个都是帅哥美女!!!来自广州大学城，姐妹们简直是诀绝子！哈哈哈
						</view>
					</view>
					<view class="ml10 flex aic jcc">
						<uv-icon name="arrow-right" size="16" color="#666"></uv-icon>
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script setup>
	import { ref , reactive, nextTick, computed } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
	const tabActive=ref(0),
		  list=ref(null),types=ref([{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}]),
		  avatarImages=ref([
			  "https://athemc.byyds.cn/static/images/music.png",
			  "https://athemc.byyds.cn/static/images/wu.png",
			  "https://athemc.byyds.cn/static/images/wu.png",
			  "https://athemc.byyds.cn/static/images/music.png",
			  "https://athemc.byyds.cn/static/images/wu.png",
			  "https://athemc.byyds.cn/static/images/music.png",
			  "https://athemc.byyds.cn/static/images/wu.png",
			  "https://athemc.byyds.cn/static/images/music.png",
			  "https://athemc.byyds.cn/static/images/wu.png",
			  "https://athemc.byyds.cn/static/images/music.png",
		  ])
	const handle=(e)=>{
		uni.navigateTo({
			url:e,
		})
	},handleBack = ()=>{
		uni.navigateBack()
	},handleIndex = ()=>{
		uni.switchTab({
			url:"/pages/index/index"
		})
	}
	
</script>

<style>
	       
</style>
